<template>
  <div class="table-container">
    <!-- 按钮 -->
    <div class="btn">
      <el-button
        type="primary"
        size="small"
        icon="el-icon-plus"
        @click="dialog = true"
        v-if="$route.name == 'cate' || $route.name == 'tag'"
        >{{ $route.name == 'cate' ? '新增分类' : '新增标签' }}</el-button
      >
    </div>
    <!-- 表格 -->
    <div class="table">
      <el-table
        :data="res.data"
        style="width: 100%"
        :header-cell-style="{ backgroundColor: '#f8f8f9' }"
      >
        <el-table-column label="序号" width="100" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="名称" align="center">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag
                size="medium"
                :type="scope.row.type ? scope.row.type : 'warning'"
                >{{ scope.row.name }}</el-tag
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="optenUpdateTag(scope.row)"
              v-show="$route.name === 'tag'"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="deleteCat(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="res.total"
        background
        class="mt"
      >
      </el-pagination>
    </div>
    <!-- 新增分类对话框 -->
    <el-dialog
      :title="$route.name == 'cate' ? '新增分类' : '新增标签'"
      :visible.sync="dialog"
      @close="cancel"
    >
      <el-form :model="form" :rules="rules">
        <el-form-item
          :label="$route.name == 'cate' ? '分类名称' : '标签名称'"
          prop="name"
        >
          <el-input v-model="form.name" autocomplete></el-input>
        </el-form-item>
        <el-form-item
          :label="$route.name == 'cate' ? '分类别名' : '标签颜色'"
          prop="alias"
        >
          <el-input
            v-model="form.alias"
            v-if="$route.name == 'cate'"
            autocomplete
          ></el-input>
          <el-select v-model="form.type" v-else placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="addNewCate">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改标签对话框 -->
    <el-dialog title="修改标签" :visible.sync="updatedialog" @close="cancel">
      <el-form :model="form" :rules="rules">
        <el-form-item label="标签名称" prop="name">
          <el-input v-model="form.name" autocomplete></el-input>
        </el-form-item>
        <el-form-item label="标签颜色" prop="alias">
          <el-select v-model="form.type" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updatedialog = false">取 消</el-button>
        <el-button type="primary" @click="updateTag">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 从 vuex 中导入 mapActions 辅助函数
import { mapActions } from 'vuex'
export default {
  name: 'Cate',
  props: {
    // 表格的数据
    res: {
      type: Object,
      default: () => ({}),
      required: true
    },
    // 是否显示对话框
    dialogFormVisible: {
      type: Boolean,
      default: false
    },
    // select选择器选项
    options: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 当前页数
      currentPage4: 1,
      // 一页显示的条数
      pagesize: 5,
      // 对话框是否显示
      dialog: this.dialogFormVisible,
      // 表单的所有元素的值
      form: {
        // 分类名称
        name: '',
        // 分类别名
        alias: '',
        // 标签类型
        type: ''
      },
      // 验证规则对象
      rules: {
        name: [{ required: true, message: '请填写分类名称', trigger: 'blur' }],
        alias: [
          {
            required: true,
            message: '请填写分类别名',
            trigger: 'blur'
          }
        ]
      },
      // 修改标签对话框显示或隐藏
      updatedialog: false,
      // 标签id
      tagId: ''
    }
  },
  watch: {
    // res: {
    //   handler() {
    //     this.$emit('get', {
    //       curpage: this.currentPage4,
    //       pagesize: this.pagesize
    //     })
    //   },
    //   immediate: true
    // }
  },
  methods: {
    ...mapActions('tag', ['getTag']),
    // pageSize（每页条数） 改变时会触发的事件的事件处理函数
    handleSizeChange(size) {
      // console.log(size)
      this.pagesize = size
      this.$emit('get', { curpage: this.currentPage4, pagesize: this.pagesize })
    },
    // currentPage(当前页) 改变时会触发的事件的事件处理函数
    handleCurrentChange(page) {
      // console.log(page)
      this.currentPage4 = page
      this.$emit('get', { curpage: this.currentPage4, pagesize: this.pagesize })
    },
    // 新增分类
    async addNewCate() {
      if (!this.form.name) return this.$message.warning('名称不能为空!')
      if (this.$route.name === 'cate') {
        if (!this.form.alias) return this.$message.warning('分类别名不能为空!')
      } else {
        if (!this.form.type) return this.$message.warning('请选择标签类型!')
      }
      this.$emit('add', this.form)
      this.dialog = false
    },
    // 删除分类
    async deleteCat(id) {
      this.$emit('deletec', id)
    },
    // 关闭对话框的事件对应处理函数
    cancel() {
      this.form.name = ''
      this.form.alias = ''
      this.form.type = ''
    },
    // 打开修改标签信息对话框
    optenUpdateTag(data) {
      console.log(data)
      this.tagId = data.id
      this.form.name = data.name
      this.form.type = data.type
      this.updatedialog = true
    },
    // 修改标签信息
    updateTag() {
      const data = {
        id: this.tagId,
        ...this.form
      }
      this.$emit('ut', data)
      this.updatedialog = false
      this.getTag({ curpage: this.currentPage4, pagesize: this.pagesize })
    }
  },
  // 组件创建完毕，data、props、methods处于可用状态，页面为挂载到浏览器
  created() {}
}
</script>

<style lang="less" scoped>
.table-container {
  margin-top: 20px;
  .mt {
    float: right;
    margin: 35px 20px 0 0;
  }
  .btn {
    margin: 20px 0;
  }
}

.table {
  overflow: hidden;
  position: absolute;
  top: 50px;
  left: 50%;
  width: 100%;
  padding: 0 20px;
  transform: translateX(-50%);
}

.el-select {
  width: 100%;
}
</style>
